<template>
  <div>
    <home-header></home-header>
    <div class="wrapper">
      <swiper :options="swiperOptions">
        <swiper-slide>
          <img src="../../imgs/swiper1.jpeg" class="swiper-img" />
        </swiper-slide>
        <swiper-slide>
          <img src="../../imgs/swiper2.jpeg" class="swiper-img" />
        </swiper-slide>
        <swiper-slide>
          <img src="../../imgs/swiper3.jpeg" class="swiper-img" />
        </swiper-slide>
        <swiper-slide>
          <img src="../../imgs/swiper4.jpeg" class="swiper-img" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <home-icon :list="iconList"></home-icon>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
  </div>
</template>

<script>
import HomeHeader from "./components/Header.vue";
import HomeIcon from "./components/Icons.vue";
// import HomeSwiper from "./components/Vueswiper.vue";

import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
Vue.use(VueAwesomeSwiper);

import HomeRecommend from "./components/Recommend.vue";
import HomeWeekend from "./components/Weekend.vue";

import axios from "axios";
import Vuex from "vuex";
import { mapState } from "Vuex";

export default {
  name: "Home",
  data() {
    return {
      swiperOptions: {
        pagination: ".swiper-pagination",
        paginationType: "bullets",
        loop: true,
      },
      iconList: [],
      recommendList: [],
      weekendList: [],
      lastCity: "",
    };
  },
  computed: {
    ...mapState(["city"]),
  },
  components: {
    HomeHeader,
    HomeIcon,
    HomeRecommend,
    HomeWeekend,
  },
  methods: {
    getHomeInfo() {
      axios.get("/api/index.json?city=" + this.city).then(this.getHomeInfoSucc);
    },
    getHomeInfoSucc(res) {
      res = res.data;
      if (res.ret && res.data) {
        const data = res.data;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
      }
    },
  },
  mounted() {
    this.lastCity = this.city;
    this.getHomeInfo();
  },
  // 页面重新显示的时候，activated被执行
  activated() {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city;
      this.getHomeInfo();
    }
  },
};
</script>

<style lang="stylus" scoped>
.wrapper {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 30.25%;
  background-color: #eee;

  .swiper-img {
    width: 100%;
  }
}</style>
